<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>indexDB</title>
	<!-- 引入 vue 样式 -->
	<script type="text/javascript" src="./vue.js"></script>
	<!-- 引入 elementui 样式 -->
	<link rel="stylesheet" href="./index.css">
	<!-- 引入 elementui 组件库 -->
	<script src="./elementUI.js"></script>
</head>
<body>
<div class="user-mod" id='app'>
	<el-button @click="addItem">新增</el-button>
	<el-table
		:data="listData"
		style="width: 100%">
		<el-table-column
			prop="id"
			label="编号"
			width="180">
		</el-table-column>
		<el-table-column prop="username" label="姓名">
		</el-table-column>
		<el-table-column prop="age" label="年龄">
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
				<el-button type="text" size="small" @click="delItem(scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog
		title="提示"
		:visible.sync="itemDialogVisible"
		width="500px">
		<el-form :model="itemData" :rules="rules" ref="ruleForm" label-width="80px">
			<el-form-item label="编号" prop="id">
				<el-input v-model="itemData.id" :disabled='!idNewAddFlag'></el-input>
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="itemData.username"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input v-model="itemData.age"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="itemDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="clickSure()">确 定</el-button>
		</span>
	</el-dialog>
</div>


<script src="./indexedDB.js"></script>
<script src="./vueIndex.js"></script>
</body>
</html>